<template>
   <div>
       <div id="Title" class="flex font">
            <i class="el-icon-arrow-left font" @click="COLORDOWN"></i>
            <div>修改颜色</div>
       </div>
       <div id="Content" class="flex">
          <!-- <input v-model="color" maxlength="15" placeholder="输入RGB值或者颜色单词" /> -->
          <!-- <div :style="getColor(color)" id="selectColor" v-if="color"></div> -->
          <div style="width:100%" class="flex">
             <div v-for="item in Colors" :key="item.id" :style="getColor(item)" class="existedColor">
               <div class="delete flex" @click="deleteColor(item)">
                    <i class="el-icon-close"></i>
               </div>
             </div>
          </div>
          <div style="margin:20px 0" class="flex">
            <el-color-picker v-model="color"></el-color-picker>
             <el-button class="Fun" :disabled='!color' @click="addColor(color)" icon="el-icon-plus">增加</el-button>
             <el-button class="Fun"  @click="refresh()" icon="el-icon-help">默认</el-button>
          </div>     
       </div>
   </div>
</template>
<script>
import {mapMutations,mapState} from 'vuex'
  export default 
  {
     name :'', 
     data() {
      return {
         color:null
      }
     },
     computed:{
      ...mapState('Setting',['Colors'])
     },
     methods:{
      ...mapMutations('Setting',['COLORDOWN','ADDCOlOR','REFRESHCOLOR','DELETECOlOR']),
       getColor:(color) => {return{background:color}},
       addColor(color){
           let res=this.Colors.find(item =>item==color)
           if(res)
           this.$message.error('颜色已存在')
           else {
               this.ADDCOlOR(color)
               let style=`background:${color};width:18px;height:18px;margin-left:2px;border-radius:50%`
               let content=`增添颜色<div style="${style}"></div>`
               this.$public.AddInform({content,type:'success',icon:'el-icon-check'})
            }
           this.color=null
       },
       deleteColor(color){
            if(color){
               this.DELETECOlOR(color)
               let style=`background:${color};width:18px;height:18px;margin-left:2px;border-radius:50%`
               let content=`删除颜色<div style="${style}"></div>`
               this.$public.AddInform({content,type:'danger',icon:'el-icon-warning-outline'})
            }
       }, 
       refresh(){
         this.REFRESHCOLOR()
          this.$public.AddInform({content:'已恢复默认设置',type:'success',icon:'el-icon-check'})
       } ,  
     }
  }
</script>
<style scoped lang='less'>

input{
   box-shadow: 0 0 5px black;
   padding: 10px;
   background: white;
   border-radius: 5px;
}
.button{
   background: var(--GeneralBackColor);
   border-radius: 50px;
   width: 200px;
   height: 40px;
}
.font{
   color: white;
   font-weight: 600;
   font-size: 18px;
}
#Title{
   width: 100%;
   height: 50px;
   background: var(--GeneralBackColor);
   position: relative;
  
   i{
      position: absolute;
      left: 20px;
      font-size: 25px;
   }
}
#Content{
   padding: 20px;
   box-sizing: border-box;
   margin-top: 50px;
   width: 100%;
   height: 100px;
     
   .existedColor{
      margin-left: 20px;
      width: 30px;
      height: 30px;

   
      .delete{
            width: 100%;height: 100%;
            background: whitesmoke;
            display: none;

            i{
               font-size: 20px;
               font-weight: 600;
               color: red;
            }
      }
   }
   .existedColor:hover .delete{
      display: flex;
   }

   .Fun{
      margin-left: 5px;
      padding: 8px;
      border-radius:10px;
      background: var(--GeneralBackColor);
      color: white;
   }
}
</style>